import { Directive, DirectiveBinding } from "vue";

export const leftLabel: Directive = {
  mounted(el: HTMLElement, binding: DirectiveBinding) {
    /**
     * 基础组建-左侧标签
     * 目前不直接支持的组件
     * el-date-picker、el-time-picker、el-cascader
     * 兼容示例：外层包一层span
     * <span v-left-label="'日期选择'">
            <el-date-picker type="date" placeholder="日期选择" v-model="form.date"></el-date-picker>
        </span>
     */
    const label = document.createElement('span');
    label.textContent = binding.value;
    label.classList.add('left-label');
    el.prepend(label);
  },
  unmounted(el) {
    const label = el.querySelector('.left-label');
    if (label) {
      label.remove();
    }
  }
};